<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="example">
    <input v-model="newTodoText"
           v-on:keyup.enter="addNewTodo"
           placeholder="Add a todo"
    >
    <ul>
        <li
           is="todo-item"
           v-for="(todo,index) in todos"
           v-bind:key="todo.id"
           v-bind:title="todo.title"
           v-on:remove="todos.splice(index,1)"
        ></li>
    </ul>
</div>
<script>
//    <!--组件-->
    Vue.component('todo-item',{
        template:'\
        <li>\
         {{ title }}\
         <button v-on:click="$emit(\'remove\')">X</button>\
        </li>\
       ',
        props:['title']
    })
   new Vue({
       el:'#example',
       data:{
           newTodoText:'',
           addNemTodo:'',
           todos:[
               {id:1,title:'Do the dishes'},
               {id: 2,title: 'Take out the trash'},
               {id: 3,title: 'Mow the lawn'}
           ],
           nextTodoId:4
       },
       methods:{
           addNemTodo:function(){
               this.todos.push({
                 id:this.nextTodoId++,
                 title:this.newTodoText
               })
               this.newTodoText=''
           }
       }

   })

</script>
</body>
</html>